<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="900">
    <el-form :model="form">
      <el-row :gutter="24">
        <el-col :span="7">
          <el-form-item label="教师名称" label-width="100px">
            <el-input v-model="form.name" placeholder="请输入教师名称" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话号码" label-width="100px">
            <el-input v-model="form.phoneNo" type="number" placeholder="请输入电话号码" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="身份证号码" label-width="100px">
            <el-input v-model="form.idNumber" maxlength="18" placeholder="请输入身份证号码" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历" label-width="100px">
            <el-select v-model="form.education" clearable placeholder="请选择学历">
              <el-option v-for="item in educationOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职时间" label-width="100px">
            <el-date-picker v-model="form.entryTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择入职时间" :editable="false" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="教师头像" label-width="90px">
            <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*" :show-file-list="false" :on-success="portraitSuccess">
              <el-image v-if="form.portrait" :src="form.portrait" class="avatar"
                fit="cover"></el-image>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历证书" label-width="100px">
            <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
              :show-file-list="false" :on-success="xueliSuccess">
              <el-image v-if="form.educationCert" :src="form.educationCert" class="avatar" fit="cover"></el-image>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资格证书" label-width="90px">
            <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
              :show-file-list="false" :on-success="zigeSuccess">
              <el-image v-if="form.qualificationCert" :src="form.qualificationCert" class="avatar"
                fit="cover"></el-image>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="主讲科目" label-width="90px">
            <el-tree class="my-tree" node-key="id" :data="subjectData" :default-checked-keys="form.subjectIds"
            :default-expanded-keys="form.subjectIds" :render-after-expand="false" show-checkbox @check-change="subjectChangeFn" ref="treeRef" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职称证书" label-width="100px">
            <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
              :show-file-list="false" :on-success="zhichengSuccess">
              <el-image v-if="form.professionalCert" :src="form.professionalCert" class="avatar" fit="cover"></el-image>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="简介" label-width="100px">
        <el-input type="textarea" v-model="form.brief" rows="5" placeholder="请输入简介" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { getQuestionListApi } from '@/server/api'
import { treeFn } from '@/utils/utils'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  forms: {
    type: Object
  }
})
const form = props.forms;
const treeRef = ref(null);
onUpdated(() => {
  // 设置目前选中的节点
  if (treeRef.value && form.subjectIds) {
    treeRef.value?.setCheckedKeys(form.subjectIds, true)
  } else {
    treeRef.value?.setCheckedKeys([], false)
  }
})
const educationOptions = ref([
  { label: '请选择学历', value: '' },
  { label: '小学', value: '小学' },
  { label: '初中', value: '初中' },
  { label: '中专/高中', value: '中专/高中' },
  { label: '专科', value: '专科' },
  { label: '本科', value: '本科' },
  { label: '硕士', value: '硕士' },
  { label: '博士', value: '博士' }
])
// 科目
const subjectData = ref([])
const { data: subjectRes } = await useAsyncData('subjectList', () => useServerRequest(getQuestionListApi, {
  method: 'post',
  body: JSON.stringify({
    pageNum: 1,
    pageSize: 500,
    courseOpen: true,
    exerciseOpen: true
  })
}))
if (subjectRes.value && subjectRes.value.errno === 0) {
  subjectData.value = treeFn(subjectRes.value.result.list, 0, [])
}
// 科目选择
const subjectChangeFn = (data, checked) => {
  if (checked) {
    form.subjectIds.push(data.id)
  } else {
    form.subjectIds.forEach((item, index) => {
      if (item === data.id) {
        form.subjectIds.splice(index, 1)
      }
    })
  }
}
// 学历上传
const xueliSuccess = (res) => {
  if (res.errno === 0) {
    form.educationCert = res.result[0];
  }
}
// 职称上传
const zhichengSuccess = (res) => {
  if (res.errno === 0) {
    form.professionalCert = res.result[0];
  }
}
// 资格上传
const zigeSuccess = (res) => {
  if (res.errno === 0) {
    form.qualificationCert = res.result[0];
  }
}
// 头像上传
const portraitSuccess = (res) => {
  if (res.errno === 0) {
    form.portrait = res.result[0];
  }
}
const emit = defineEmits()
// 取消
const cancelFn = () => {
  emit('pick', { visible: false })
}
// 确认
const confirmFn = () => {
  emit('pick', { visible: false, form })
}
</script>

<style>
.my-tree .el-tree__empty-text {
  white-space: nowrap;
}
</style>
<style lang="less" scoped>
.my-tree {
  width: 100%;
}

.avatar-uploader {
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  background: #FFFFFF;

  &:hover {
    border-color: #C0C4CC;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #D6D6D6;
    width: 178px;
    height: 178px;
    text-align: center;

    &:hover {
      color: #C0C4CC;
    }
  }
}
</style>